<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>读者信息登陆页面</title>
		<style>
			* { 
				margin: 0; 
				padding: 0; 
			}
			html { 
				height: 100%; 
			}
			body { 
				height: 100%;
				/* background: #fff url(images/backgroud.png) 50% 50% no-repeat; */
				background-size: cover;
			}
			.dowebok { 
				position: absolute; 
				left: 50%; 
				top: 50%; 
				width: 430px; 
				height: 550px; 
				margin: -300px 0 0 -215px; 
				border: 1px solid #000; 
				border-radius: 20px; 
				overflow: hidden;
			}
			.logo { 
				width: 104px; 
				height: 104px; 
				margin: 50px auto 80px; 
				background: url(img/reader.png) no-repeat;
				background-size: 100% 100%;
			}
			.form-item { 
				position: relative; 
				width: 360px; 
				margin: 0 auto; 
				padding-bottom: 30px;
			}
			.form-item input { 
				width: 288px; 
				height: 48px; 
				padding-left: 70px; 
				border: 1px solid #000; 
				border-radius: 25px; 
				font-size: 18px; 
				color: #000; 
				background-color: transparent; 
				outline: none;
			}
			.form-item button { 
				width: 360px; 
				height: 50px; 
				border: 0; 
				border-radius: 25px;
				font-size: 18px; 
				color: #1f6f4a; 
				outline: none; 
				cursor: pointer; 
				background-color: #000; 
			}
			#username { 
				background: url(img/email.png) 20px no-repeat;  
				background-size: 8%;
			}
			#password { 
				background: url(img/password.png) 20px no-repeat;
				background-size: 8%;
			}
			.tip { 
				display: none; 
				position: absolute; 
				left: 20px; 
				top: 52px; 
				font-size: 14px; 
				color: #f50;
			 }
			.reg-bar { 
				width: 360px; 
				margin: 20px auto 0;
				font-size: 14px; 
				overflow: hidden;
			}
			.reg-bar a { 
				color: #000;
				text-decoration: none; 	
			}
			.reg-bar a:hover { 
				text-decoration: underline; 
			}
			.reg-bar .reg { 
				float: left;
			 }
			.reg-bar .forget { 
				float: right; 
			}
			.dowebok ::-webkit-input-placeholder { 
				font-size: 18px; 
				line-height: 1.4; 
				color: #000;
			}
			.dowebok :-moz-placeholder { 
				font-size: 18px; 
				line-height: 1.4; 
				color: #000;
			}
			.dowebok ::-moz-placeholder { 
				font-size: 18px; 
				line-height: 1.4; 
				color: #000;
			}
			.dowebok :-ms-input-placeholder { 
				font-size: 18px; 
				line-height: 1.4; 
				color: #000;
			}
			#submit{
				color: #fff;
			}
			@media screen and (max-width: 500px) {
				* { 
					box-sizing: border-box; 
				}
				.dowebok { 
					position: static; 
					width: auto; 
					height: auto; 
					margin: 0 30px; 
					border: 0; 
					border-radius: 0; 
				}
				.logo { 
					margin: 50px auto; 
				}
				.form-item { 
					width: auto; 
				}
				.form-item input, .form-item button, .reg-bar { 
					width: 100%;
				 }
			}
		</style>
	</head>
	<body>
		<div class="dowebok">
			<div class="logo"></div>
			<div class="form-item">
				<input id="username" type="text" autocomplete="off" placeholder="邮箱">
			</div>
			<div class="form-item">
				<input id="password" type="password" autocomplete="off" placeholder="登录密码">
			</div>
			<div class="form-item"><button id="submit">登 录</button></div>
			<div class="reg-bar">
				<a class="reg" href="javascript:">立即注册</a>
				<a class="forget" href="javascript:">忘记密码</a>
			</div>
		</div>
		<script src="js/jquery.min.js"></script>
		<script>
			$(function () {
				$('input').val('')
				$('#submit').on('click', function () {
					// $('.tip').show()
					location = "borHistory.html";
				})
			})
		</script>

		<div style="text-align:center;"></div>
	</body>
</html>